<template>
    <div class="tmpl">
        <div class="submittitle">
            提交评论
        </div>
        <div class="submitarea">
            <textarea ref="postcontent" class="textarea" placeholder="输入评论······"></textarea>
            <mt-button type="primary" size="large" @click="postcomment">发表</mt-button>
        </div>
        <div class="commenttitle">
            评论列表
        </div>
        <div class="commentlist">
            <div class="outwarp clearfix" v-for="item in comments">
                <div class="content" v-text="item.content"></div>
                <div class="user" v-text="item.user_name"></div>
                <div class="time" >{{item.add_time | fmtdate('YYYY - MM - DD')}}</div><!--因为上一种方式不支持过滤器，所以换了一种写法-->
            </div>
            <!--&lt;!&ndash;这是测试的死数据&ndash;&gt;-->
            <!--<div class="outwarp clearfix">-->
                <!--<div class="content">这是一条评论</div>-->
                <!--<div class="user">这是用户</div>-->
                <!--<div class="time">这是评论时间</div>-->
            <!--</div>-->
        </div>

        <!--加载更多按钮-->
        <mt-button class="more" type="danger" size="large" @click="getmore">加载更多</mt-button>
    </div>
</template>
<style scoped>
    .more{
        margin-top: 10px;
    }
    .tmpl{
        padding:8px;
    }
    .submittitle, .commenttitle{
        font-weight:700;
        font-size: 21px;
        border-bottom: 1px solid rgba(92,92,92,0.4);
        padding-bottom:15px;
    }
    .submitarea{
        padding-top: 5px;
    }
    .commenttitle{
        margin-top: 10px;
        border-top: 1px solid rgba(92,92,92,0.4);
        padding:10px 8px;
    }
    .outwarp{
        border-bottom: 1px solid rgba(92,92,92,0.4);
        padding:8px;
    }
    .user{
        width:70%;
        float: left;
        color: #0094ff;
    }
    .time{
        width:30%;
        float: right;
        color: red;
        text-align: center;
    }
</style>
<script>
    import common from '../../kits/common.js';
    import  { Toast } from 'mint-ui'; //这是导入mint-ui 的提示组件
    export default{
        data(){
            return{
                comments:[],  //用来存储当前数据的评论信息列表
                pageindex:1   //这是获取评论的页码，默认第一页
            }
        },created(){
            this.getcomment(this.pageindex);
        },
        methods:{
            //1.0 提交评论
            postcomment(){
                let id = this.artid;
                let url = common.apihost + '/api/postcomment/' + id;
                //技术点：如何获取页面上的评论内容**************************************************************
//                console.log(this.$refs.postcontent);
                //1.0通过vue获取到评论的数据
                let contentText = this.$refs.postcontent.value;
//                console.log(contentText);

                //判断文本框是否有值
                if (!contentText || contentText.trim().length <= 0){
                    Toast('评论内容不能为空');
                    return;
                }

                //2.0将评论提交到服务器
                this.$http.post(url,{content:contentText},{emulateJSON:true}).then(
                    res=>{
                        //利用mint-ui中的Toast提示用户提交成功
                        Toast("评论交成功");

                        //在评论成功后刷新页面，展示评论
                        this.getcomment(this.pageindex,true);

                        //清空文本框的值
                        this.$refs.postcontent.value =  '';
                    },res=>{
                        console.log('评论数据提交失败');
                    }
                );

            },
            //2.0 获取评论
            getcomment(pageindex,isreload){
                let id = this.artid;
                let url = common.apihost + '/api/getcomments/'+ id +'?pageindex='+pageindex;
                //开始请求
                this.$http.get(url).then(
                    res=>{
                        //由于要实现加载更多的功能，所以这里不能使最新数据覆盖数组，
                        //要将最新数据追加到数组
                        if (isreload) {
                            this.comments = res.body.message;
                        }else {
                            //这是给加载更多使用的
                            this.comments = this.comments.concat(res.body.message);
                        }
                    },
                    res=>{
                        console.log('获取评论数据失败');
                    }
                );
            },
            //3.0获取更多数据
            getmore(){
                //1.0 将pageindex加1
                this.pageindex ++;
                //2.0 将自增以后的pageindex值传入getcomment中获取数据
                this.getcomment(this.pageindex);
            }
        },
        props:['artid']  //用来接收当前评论数据的所属内容的id,这个值可以在vue对象的任何地方使用
    }
</script>